<template>
	<view :class="['z-picker-view', stick?'z-stick':'', zClass]">
		<view v-if="stick" class="viewer" @click="onShow">
			<view class="left">
				<view v-for="(v, i) in value" :key="i">
					<template v-if="items[i]&&items[i][v]">{{items[i][v].label}}</template>
					<text v-if="i<value.length-1" class="connector">{{connector}}</text>
				</view>
			</view>
			<text class="iconfont">&#xe6f8;</text>
		</view>
		<view v-if="show" class="box">
			<view v-if="stick">
				<view class="mask" @click="onHide"></view>
				<view class="btns">
					<text @click="onHide">取消</text>
					<text class="primary" @click="onConfirm">确定</text>
				</view>
			</view>
			<picker-view
				class="picker-view"
				:style="{height: height+'px'}"
				:value="value"
				@change="onChange"
			>
				<picker-view-column
					v-for="(col, cidx) in items"
					:key="cidx"
				>
					<view
						v-for="(item,idx) in col"
						:key="idx"
						class="col-item"
					>
						{{item.label}}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			'zClass':{type:String},
			'items':{type:Array},
			'height':{type:Number, default:300},
			'value':{type:Array},
			'stick':{type:Boolean},
			'connector':{type:String},
			'linkage':{type:Boolean}
		},
		mounted() {
			if(this.linkage){
				this.resetColumns(this.value)
			}
		},
		data(){
			return{
				show:!this.stick,
				valTemp:this.value
			}
		},
		methods:{
			// 初始化
			resetColumns(val){
				if(this.items.length>1)this.items.splice(1)
				let current = this.items[0]
				for(let i=1; i<val.length; i++){
					current = current[val[i-1]].children
					this.items.push(current)
				}
			},
			onChange(e){
				if(this.linkage){
					this.resetColumns(e.detail.value)
					// 判断改变从第几列开始，并初始化该列之后的下标为0
					for(let i in this.value){
						if(this.value[i] !== e.detail.value[i]){
							e.detail.column = i
							continue
						}
						if(e.detail.column && i>e.detail.column){
							e.detail.value[i] = 0
						}
					}
				}
				// e 传送下标并加入下标值
				this.$emit('input', e.detail.value)
				e.detail.mapValue = e.detail.value.map((k, i)=>{
					return this.items[i][k]
				})
				this.$emit('change', e)
			},
			onConfirm(){
				this.valTemp = this.value
				this.show = false
			},
			onHide(){
				this.show = false
				this.onChange({detail: {value: this.valTemp}})
			},
			onShow(){
				this.show = true
			}
		}
	}
</script>

<style lang="scss">
	.z-picker-view{
		.viewer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: $form-cell-min-height;
			padding: 15upx 30upx;
			.left{
				display: flex;
				align-items: center;
			}
		}
		.col-item{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.box{
			width: 100%;
			z-index: 97;
		}
		.btns{
			display: flex;
			justify-content: space-between;
			padding: 20upx 30upx 60upx;
			border-top: solid 1px $border-color;
			background-color: #fff;
		}
		.connector{
			margin: 0 8upx;
		}
		.btns, .picker-view{
			position: relative;
			z-index: 2;
			background-color: #fff;
		}
		&.z-stick{
			.box{
				position: fixed;
				bottom: 0;
			}
		}
		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: rgba(0,0,0,0.3);
			z-index: 1;
		}
	}
</style>
